<!--61两级行星轮+一级平行轴传动比分配-->
<template>
  <div class="sum" style="width: 100%; height: 100%;font-size: 16px;position:relative;;">
    <div class="body">
      <a-modal v-model="visible" title="齿数比限制值" @ok="handleOk" width="700px"  style="border:12px;overflow: hidden">
        <img src="@/assets/image/image_61_3.png" style="width: 100%;" alt="">
      </a-modal>
      <div class="top-wrapper" >
        <div class="top-left">
          <div class="title" style="width: 100%;height: 6%;overflow:hidden;">
            <span style="margin-left: 3%">输入参数</span>
          </div>
          <div>
            <div class="top-left-content">
              <span>总传动比</span>
              <input type="text" v-model="input.R0">
            </div>
            <div class="top-left-content">
              <span>第1级行星轮系最大宽径比上限值</span>
              <input type="text" v-model="input.B1min">
            </div>
            <div class="top-left-content">
              <span>第2级行星轮系最大宽径比上限值</span>
              <input type="text" v-model="input.B2min">
            </div>
            <div class="top-left-content">
              <span>平行轴宽径比上限值</span>
              <input type="text" v-model="input.B3min">
            </div>
            <div class="top-left-content">
            <span>平行轴齿数比上限值</span>
            <input type="text" v-model="input.ratio_parallel">
            </div>

          </div>
          <div>
            <ul>
              <li style="text-align: center">
                <span style="margin-left: 28%">不均载系数</span>
                <span style="margin-left: 15%;margin-right: 6%">齿数比限制值</span>
                <button style="width: 10%;font-size: 18px;margin-right: 0" @click="showModal" >！</button>
              </li>
              <li>
                <span>6个行星轮</span>
                <input type="text" v-model="input.bb1">
                <input type="text" v-model="input.aa1">
              </li>
              <li>
                <span>5个行星轮</span>
                <input type="text" v-model="input.bb2">
                <input type="text" v-model="input.aa2">
              </li>
              <li>
                <span>4个行星轮</span>
                <input type="text" v-model="input.bb3">
                <input type="text" v-model="input.aa3">
              </li>
              <li>
                <span>3个行星轮</span>
                <input type="text" v-model="input.bb4">
                <input type="text" v-model="input.aa4">
              </li>

            </ul>
          </div>
          <div  style="height: 30%;width: 100%">
            <div style="height: 100%;float:left;width:60%;margin-left: 25%;margin-top: 2%">
              <div class="clearfix" style="margin-bottom:1%">
                <div style="width: 25%;height: 100%;float: left">
                  <input type="text" v-model="input.ratio_D1_D2_min" style="width: 40%;margin-left: 35%;margin-top: 4%">
                  <span>≤</span>
                </div>
                <div style="width: 40%;height: 100%;display: inline-block;float: left">
                  <div style="height: 50%;text-align: center;">第1级行星轮系外径</div>
                  <div style="height: 50%;text-align: center;">第2级行星轮行星径</div>
                </div>
                <div style="width: 25%;height: 100%;float: left">
                  <span style="margin-left: 10%">≤</span>
                  <input type="text" v-model="input.ratio_D1_D2_max" style="width: 40%;margin-top: 4%">
                </div>
              </div >
              <div class="clearfix">
                <div style="width: 25%;height: 100%;float: left">
                  <input type="text" v-model="input.ratio_D2_D3_min" style="width: 40%;margin-left: 35%;margin-top: 4%">
                  <span>≤</span>
                </div>
                <div style="width:40%;height: 100%;display: inline-block;float: left">
                  <div style="height: 50%;text-align: center;">第2级行星轮系外径</div>
                  <div style="height: 50%;text-align: center;">平行轴外径</div>
                </div>
                <div style="width: 25%;height: 100%;float: left">
                  <span style="margin-left: 10%">≤</span>
                  <input type="text" v-model="input.ratio_D2_D3_max" style="width: 40%;margin-top: 4%">
                </div>
              </div>
            </div>
            <button class="buttontype" style="width: 10%;margin-top: 5%;" @click="onSubmit">计算</button>
          </div>
        </div>
        <div style="width: 30%;height: 80%;float: right;outline:1px solid silver;margin-right: 5%;margin-top: 0.5%">
          <img src="@/assets/image/image_61_1.jpg" style="height: 100%;margin-top:0.5%;"/>
        </div>
      </div>


      <div class="mid-wrapper">
        <div class="mid-wrapper1 clearfix" style="width: 98%;height: 100%;margin-left: 1%;">
          <div class="title" style="width: 100%;height: 10%;overflow:hidden">
            <span style="margin-left: 2%">以外径最小为目标函数</span>
          </div>
          <div class="content1" style="width: 100%;height: 18%;margin-top:0.5%;overflow: hidden">
            <div>第1级行星轮个数</div>
            <div>第2级行星轮个数</div>
            <div>第1级齿数比</div>
            <div>第2级齿数比</div>
            <div>平行轴齿数比</div>
            <div>总体积表征量</div>
            <div>第1级齿圈半径表征值</div>
            <div>第2级齿圈半径表征值</div>
            <div>平行轴外半径表征值</div>
            <div>第1级齿数宽径比</div>
            <div>第2级齿数宽径比</div>
            <div>平行轴小轮宽径比</div>
            <div>第1级实际最大宽径比</div>
            <div>第2级实际最大宽径比</div>
            <div>平行轴实际最大宽径比</div>
            <div>第1级与第2级齿宽比</div>
            <div>第2级与平行轴齿宽比</div>
          </div>
          <div class="table-wrapper1" style="height: 67%; width: 100%;overflow-y: scroll;">
            <span style="width: 40.95%;height:100%;text-align: center;display: inline-block;">
              <span v-for="(items) in str0" :key="items">
                <span >{{items}}</span>
              </span>
            </span>
            <span style="width: 40.95%;height:100%;text-align: center;display: inline-block;">
              <span v-for="(items) in str2" :key="items">
                <span >{{items}}</span>
              </span>
            </span>
            <span style="width: 17.55%;height:100%;text-align: center;display: inline-block;">
              <span v-for="(items) in str3" :key="items">
                <span style="width: 31.33%">{{items}}</span>
              </span>
            </span>
          </div>
        </div>
      </div>


      <div class="bottom-wrapper">
        <div class="bottom-wrapper1" style="width: 50%;height: 100%;margin-left: 1%;float: left;overflow: hidden">
          <div class="title" style="width: 100%;height: 10%;overflow:hidden">
            <span style="margin-left: 4%">以体积最小为目标函数</span>
          </div>
          <div class="content2" style="width: 100%;height: 15%;margin-top:2%;overflow: hidden">
            <div>第1级行星轮个数</div>
            <div>第2级行星轮个数</div>
            <div>第1级齿数比</div>
            <div>第2级齿数比</div>
            <div>平行轴齿数比</div>
            <div>总体积表征量</div>
          </div>
          <div class="table-wrapper2" style="height: 65%; width: 98%;margin-top: 0.1%;margin-left: 0.7%">
            <span style="width: 100%;height:97%;text-align: center;display: block;overflow-y: scroll">
              <span v-for="(items) in str1" :key="items">
                <span>{{items}}</span>
              </span>
            </span>
          </div>
        </div>
        <div style="width: 45%;height: 100%;float: right;">
          <img src="@/assets/image/image_61_2.jpg" style="width: 40%;outline: 1px solid silver;position:absolute;"/>
        </div>
      </div>
    </div>
  </div>
</template>.

<script>
import {nameOptiRatio_twoplanet_add_oneparallel_lastGet} from "@/api/file";

export default {
  created(){
    document.title="两级行星轮+一级平行轴传动比分配"
    this.$store.state.file.key =61
  },
  name: "nameOptiRatio_twoplanet_add_oneparallel_last",
  data() {
    return{
      params_61:this.$store.state.file.dataList[61],
      visible:false,
      str1:null,
      str2:null,
      str3:null,
      str0:null,
      table1:[
          //value1-value17,在表格中从左往右显示
      ],
      table2:[
          //value1-value6,在表格中从左往右显示
      ],
      input:{
        R0:120,  //总传动比
        B1min:1,  //第1级行星轮系最大宽径比上限值
        B2min:1,  //第2级行星轮系最大宽径比上限值
        B3min:1,  //平行轴宽径比上限值
        ratio_D1_D2_min:1,  //第1级行星轮系/第2级行星轮系外径比最小值
        ratio_D1_D2_max:1.2,  //第1级行星轮系/第2级行星轮系外径比最大值
        ratio_D2_D3_min:1,  //第2级行星轮系外径/平行轴外半径比最小值
        ratio_D2_D3_max:1.2,  //第2级行星轮系外径/平行轴外半径比最大值
        ratio_parallel:7,  //平行轴齿数比上限值
        bb1:1,  //6个行星轮不均载系数
        bb2:1,  //5个行星轮不均载系数
        bb3:1,  //4个行星轮不均载系数
        bb4:1,  //3个行星轮不均载系数
        aa1:3,  //6个行星轮齿数比限制值
        aa2:3.7,  //5个行星轮齿数比限制值
        aa3:5.7,  //4个行星轮齿数比限制值
        aa4:11,  //3个行星轮齿数比限制值
      },
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    onSubmit() {
      nameOptiRatio_twoplanet_add_oneparallel_lastGet(this.input).then(res => {
        console.log("打印结果");
        console.log(res);

        this.str0 = res[0].split("\n\n")[1].split("    ");
        this.str2 = res[0].split("\n\n")[3].split("    ");
        this.str3 = res[0].split("\n\n")[5].split("    ");
        this.str0=this.str0.slice(1)
        this.str3=this.str3.slice(1)
        this.str2=this.str2.slice(1)

        this.str1 = res[1].split("    ");
        this.str1=this.str1.slice(1)
        console.log(this.str1);
        console.log(this.str0);
        console.log(this.str2);
        console.log(this.str3);
      });
    }
  }
}
</script>

<style scoped>
.buttontype{
  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}
.mid-wrapper1,.top-left,.bottom-wrapper1{
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.top-left{
  overflow: hidden;
}
.title{
  background-color: #D7D7D7;
  border-radius: 3px;
  font-weight: bolder;
  font-size: 17.5px;
}
ol, ul {
  list-style: none;
}
.top-wrapper
{
  overflow: hidden;
}
input,select,label{
  text-align: center;
}
.body{
  width: 98.5%;
  height: 96%;
  margin-left: 1%;
  line-height: 1;
}
.top-wrapper{
  height: 45%;
  width: 100%;
}
.mid-wrapper{
  height: 26%;
  width: 100%;
}
.bottom-wrapper{
  margin-top: 1%;
  height: 25%;
  width: 100%;
}
.top-left{
  float: left;
  height: 95%;
  width: 60%;
  margin-left: 1%;
}
.top-left>div{
  float: left;
  height:  60%;
  width: 50%;
}
.top-left>div div:nth-child(7),
.top-left>div div:nth-child(6){

  height: 20%;
}
.top-left-content{
  margin-top: 1.5%;
  text-align: right;
}
.top-left-content input{
  margin-left: 5%;
  width: 20%;
}

.top-left li{
  text-align: center;
}
.top-left ul input{
  width: 20%;
  margin: 0 5%;
}


.content1 div{
  float: left;
  height: 100%;
  width: 5.5%;
  text-align: center;
  margin-left: 0.35%;
}


.content2 div{
  float: left;
  height: 100%;
  width: 16.2%;
  text-align: center;
  margin-left: 0.35%;
}

.table-wrapper1>span,
.table-wrapper2>span{
  width: 100%;
}

.table-wrapper2 tr>span{
  display: inline-block;
  width: 16.5%;
}
.table-wrapper1>span>span>span{
  display: inline-block;
  width: 14.152%;
}
.table-wrapper2>span>span>span{
  display: inline-block;
  width: 16.5%;
}
</style>